import React, {createRef, useState} from "react";
import './userManagerAdd.scss'
import {Button, Checkbox, Input} from "antd";
import {getRefValue} from "../../../utils/refUtils";
import {addUser} from "../../../api/userApi";


function UserManageAdd(){

    const rolesOptions = ['初审','审查员','领导','区县管理员','市管理员']

    const goBack = () => {
        window.location.href = '../user_manage?menu=user_manage'
    }

    const submit = () => {
        let data = {
            username: getRefValue(username),
            password: getRefValue(password),
            districtId: 1,
            districtName: getRefValue(districtName),
            districtCode: 1,
            orgId: 1,
            orgName: getRefValue(orgName),
            realName: getRefValue(realName),
            mobile: getRefValue(mobile),
            roles: roles.toString(),
            remark: getRefValue(remark)
        }
        console.log(roles)

        addUser(data)
    }

    const handleRoles = list => {
        setRoles(list)
    }

    const username = createRef()
    const password = createRef()
    const districtName = createRef()
    const orgName = createRef()
    const realName = createRef()
    const mobile = createRef()
    const [roles, setRoles] = useState([])
    const remark = createRef()

    return(
        <div className={'user_manager_add_container'}>
            <div className={'user_manager_add_container_title'}>
                账号信息
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>用户名</div>
                <Input placeholder={'请填写用户名'} ref={username}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>密码</div>
                <Input placeholder={'请填写密码'} ref={password}/>
            </div>

            <div className={'user_manager_add_container_title'}>
                用户信息
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>区域</div>
                <Input placeholder={'请填写区域'} ref={districtName}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>单位</div>
                <Input placeholder={'请填写单位'} ref={orgName}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>用户姓名</div>
                <Input placeholder={'请填写用户姓名'} ref={realName}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>联系电话</div>
                <Input placeholder={'请填写联系电话'} ref={mobile}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>办公室电话</div>
                <Input placeholder={'请填写办公室电话'}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>所属角色</div>
                <Checkbox.Group options={rolesOptions} onChange={handleRoles} style={{width: '100%'}}/>
            </div>

            <div className={'user_manager_add_container_item'}>
                <div>备注</div>
                <Input placeholder={'请填写备注'} ref={remark}/>
            </div>

            <div className={'user_manager_add_panel'}>
                <Button type={'primary'} onClick={submit}>保存</Button>
                <Button onClick={goBack}>返回</Button>
            </div>
        </div>
    )
}

export default UserManageAdd